<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1>欢迎YY来到千锋</h1>

    <p>
        <span>用户名</span>
        <span>手机号</span>
        <span>邮箱</span>
        <span>密码</span>
    </p>

    <ul>
        <!-- <li>
            <span>1</span>
            <span>yy</span>
            <span>123</span>
        </li> -->
    </ul>

    <script src="../js/tools.js"></script>
    <script>



        const oH1 = document.querySelector('h1') ;
        const username = localStorage.getItem('LOGIN_USER') ;
        oH1.innerHTML = username ;




        let html = '' ;

        // 遍历所有的数据
        for(let i = 0 ; i < localStorage.length ; i++) {
            let key = localStorage.key(i) ;
            // console.log(key);

            // 判断账号  YYDS_
            if(key.includes('YYDS_')) {
                console.log(key);
                let res = localStorage.getItem(key) ;
                let obj = JSON.parse(res) ;
                console.log(obj);

                // 解构
                const {user , tel , email , pwd} = obj ;


                html += `
                <li>
                    <span>${user}</span>
                    <span>${tel}</span>
                    <span>${email}</span>
                    <span>${pwd}</span>
                </li>
                `
            }
        }


        const oUl = document.querySelector('ul') ;
        oUl.innerHTML = html ;
      

    </script>

</body>

</html>